"use client"
import React,{useState} from 'react'
import TABLE from '../../system/Content/page'
import "./page.css"
import { Button, Input } from 'antd';
import { DownOutlined, UserOutlined,SearchOutlined ,LogoutOutlined,
  RedoOutlined,BorderOutlined,CheckSquareOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Dropdown, message, Space, Tooltip ,Flex,TableColumnsType, TableProps } from 'antd';
import { UserAddOutlined } from '@ant-design/icons';
const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
  message.info('Click on left button.');
  console.log('click left button', e);
};

const handleMenuClick: MenuProps['onClick'] = (e) => {
  message.info('Click on menu item.');
  console.log('click', e);
};



const items: MenuProps['items'] = [
  {
    label: '1st menu item',
    key: '1',
    icon: <UserOutlined />,
  },
  {
    label: '2nd menu item',
    key: '2',
    icon: <UserOutlined />,
  },
  {
    label: '3rd menu item',
    key: '3',
    icon: <UserOutlined />,
  }
];

const menuProps = {
  items,
  onClick: handleMenuClick,
};

//日期
import type { DatePickerProps } from 'antd';
import { DatePicker } from 'antd';

const onChange: DatePickerProps['onChange'] = (date, dateString) => {
  console.log(date, dateString);
};
//个人
import type { SearchProps } from 'antd/es/input/Search';

const { Search } = Input;

const suffix = (
  <UserAddOutlined
    style={{
      fontSize: 16,
      color: '#D4E1F7',
    }}
  />
);



const onSearch: SearchProps['onSearch'] = (value, _e, info) => console.log(info?.source, value);
export const columns = [
  {
    title: '订单编号',
    dataIndex: 'order',
    key: 'order',
  },
  {
    title: '订单标题',
    dataIndex: 'headline',
    key: 'headline',
  },
  {
    title: '管理客户',
    dataIndex: 'client',
    key: 'client',
    
  },
  {
    title: '订单总金额',
    dataIndex: 'total',
    key: 'total',
  
  },
  {
    title: '审批类型',
    dataIndex: 'approval',
    key: 'approval',
   
  },
  {
    title: '创建人员',
    dataIndex: 'creator',
    key: 'creator',
  
  },
  {
    title: '提交时间',
    dataIndex: 'time',
    key: 'time',
    
  },
  {
    title: '操作',
    key: 'action',
    render: (_: any, content: any) => {
      return <div className='co'>
        <span>
        <LogoutOutlined />
          详情
        </span>
      </div>
    }
  },
];
export const data = [
  {
    key: '1',
    order: 'SJ20190324010001',
    headline: '订单标题',
    client: '深圳市亿恩科技有限公司',
    total:'￥10,000.00',
    approval:'等待审批',
    creator:'赵小刚',
    time:'2019-03-15 17:27'
  },
  {
    key: '2',
    order: 'SJ20190324010001',
    headline: '订单标题',
    client: '深圳市亿恩科技有限公司',
    total:'￥10,000.00',
    approval:'等待审批',
    creator:'赵小刚',
    time:'2019-03-15 17:27'
  },
  {
    key: '3',
    order: 'SJ20190324010001',
    headline: '订单标题',
    client: '深圳市亿恩科技有限公司',
    total:'￥10,000.00',
    approval:'等待审批',
    creator:'赵小刚',
    time:'2019-03-15 17:27'
  },
  {
    key: '4',
    order: 'SJ20190324010001',
    headline: '订单标题',
    client: '深圳市亿恩科技有限公司',
    total:'￥10,000.00',
    approval:'等待审批',
    creator:'赵小刚',
    time:'2019-03-15 17:27'
  },
  {
    key: '5',
    order: 'SJ20190324010001',
    headline: '订单标题',
    client: '深圳市亿恩科技有限公司',
    total:'￥10,000.00',
    approval:'等待审批',
    creator:'赵小刚',
    time:'2019-03-15 17:27'
  },
  {
    key: '6',
    order: 'SJ20190324010001',
    headline: '订单标题',
    client: '深圳市亿恩科技有限公司',
    total:'￥10,000.00',
    approval:'等待审批',
    creator:'赵小刚',
    time:'2019-03-15 17:27'
  },
  {
    key: '7',
    order: 'SJ20190324010001',
    headline: '订单标题',
    client: '深圳市亿恩科技有限公司',
    total:'￥10,000.00',
    approval:'等待审批',
    creator:'赵小刚',
    time:'2019-03-15 17:27'
  },
  {
    key: '8',
    order: 'SJ20190324010001',
    headline: '订单标题',
    client: '深圳市亿恩科技有限公司',
    total:'￥10,000.00',
    approval:'等待审批',
    creator:'赵小刚',
    time:'2019-03-15 17:27'
  },
  {
    key: '9',
    order: 'SJ20190324010001',
    headline: '订单标题',
    client: '深圳市亿恩科技有限公司',
    total:'￥10,000.00',
    approval:'等待审批',
    creator:'赵小刚',
    time:'2019-03-15 17:27'
  },
  {
    key: '10',
    order: 'SJ20190324010001',
    headline: '订单标题',
    client: '深圳市亿恩科技有限公司',
    total:'￥10,000.00',
    approval:'等待审批',
    creator:'赵小刚',
    time:'2019-03-15 17:27'
  },
  {
    key: '11',
    order: 'SJ20190324010001',
    headline: '订单标题',
    client: '深圳市亿恩科技有限公司',
    total:'￥10,000.00',
    approval:'等待审批',
    creator:'赵小刚',
    time:'2019-03-15 17:27'
  }
];

export const current = {
  defaultPageSize: 6,
  pageSizeOptions: [2, 4, 6, 8],
  showSizeChanger: true,
  total: data.length
}
function page() {
// /复选框
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
 console.log('selectedRowKeys changed: ', newSelectedRowKeys);
 setSelectedRowKeys(newSelectedRowKeys);
};
const rowSelection = {
  selectedRowKeys,
  onChange: onSelectChange,
};
  return (
    <div className='top'style={{width:"90%",margin:" 0 auto"}}>
      <div className='title'>
        <Input placeholder="搜索关键词" style={{ width: 160 }}  className="gap-right"/>
        <Space wrap  className="gap-right">
          <Dropdown menu={menuProps}>
            <Button>
              <Space>
                审批类型
                <DownOutlined />
              </Space>
            </Button>
          </Dropdown>
        </Space>
        <Space direction="vertical"  className="gap-right">
          <DatePicker onChange={onChange} />
        </Space>
        <Space direction="vertical"  className="gap-right">
          <DatePicker onChange={onChange} />
        </Space>
        <Input placeholder="创建人员" suffix={suffix} style={{ width: 160 }}  className="gap-right"/>
        {/* 查询 */}
      <Button type="primary" icon={<SearchOutlined />}  className="gap-right">
        查询
      </Button>
        {/* 重置 */}
        <Button icon={<RedoOutlined />}  className="gap-right">
        重置
      </Button>
      </div>
      <div className='content'>
        <div className='top1'>
          <div className='top1-1'>
          <Button  icon={<RedoOutlined />} >导出</Button>
          </div>
          <div className='top1-2'>
          <Button  icon={<RedoOutlined />} >排序</Button>
          <Button  icon={<RedoOutlined />} className='poo'>列表</Button>
          </div>
        </div>
        <div className='top2' >
          <TABLE data={data} columns={columns} style={{ width:"90%"}} 
         current={current} rowSelection={rowSelection}></TABLE>
          <div className='di'>
            <Button icon={<CheckSquareOutlined />}>全选</Button>
            <Button icon={<BorderOutlined />}>反选</Button>
          </div>
            
        </div>
      </div>
    </div>
  )
}

export default page
